<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>volidation表单校验</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/messages_zh.min.js"></script>
    <script type="text/javascript">
        var validateRule = {
            rules:{
                username:{
                    required:true,
                    minlength:3,
                    maxlength:6
                },
                email:{
                    required:true,
                    email:true
                },
                password:{
                    required:true,
                    minlength:3,
                    maxlength:6
                },
                rePassword:{
                    required:true,
                    equalTo:"[name='password']",
                },
                birthday:{
                    date:true
                },
                sex:{
                    required:true
                }
            },
            messages:{
                username:{
                    required:"这个是必须填写的",
                    minlength:"最少输入 3 个字符",
                    maxlength:"最多输入 6 个字符"
                },
                sex:{
                    required:"性别必须选择"
                }
            }
        };
        $(function(){
            $("#registerForm").validate(validateRule);
        });
    </script>
</head>
<body>
    <form action="register.jsp" id="registerForm">
        <table border="1" width="800px" height="500px">
            <tr>
                <td colspan="2" align="center">注册</td>
            </tr>
            <tr>
                <td align="right" width="100px">用户名：</td>
                <td align="left"><input type="text" name="username" /></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td><input type="text" name="email"/></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td align="right">重复密码：</td>
                <td><input type="password" name="rePassword"/></td>
            </tr>
            <tr>
                <td align="right">出生年月日：</td>
                <td><input type="text" name="birthday" /></td>
            </tr>
            <tr>
                <td align="right">性别：</td>
                <td>男<input type="radio" name="sex" />女<input type="radio" name="sex" /><label for="sex" class="error"></label></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" /></td>
            </tr>
        </table>
    </form>
</body>
</html>